.heter-triangle{
    @include size;
    &::before{
    @include beforesize;
    background:
    linear-gradient(to right bottom,transparent,transparent 50%,$normal-line,$normal-line calc(50% + 4px),transparent calc(50% + 4px),transparent) no-repeat left calc(50% - 8px) top/ 5% 10% border-box,
    linear-gradient(to right bottom,transparent,transparent 50%,$normal-line,$normal-line calc(50% + 4px),transparent calc(50% + 4px),transparent) no-repeat left bottom/ 5% 10% border-box,
    linear-gradient(to left bottom,transparent,transparent 50%,$normal-line,$normal-line calc(50% + 4px),transparent calc(50% + 4px),transparent) no-repeat right calc(50% - 8px) top / 5% 10% border-box,
    linear-gradient(to left bottom,transparent,transparent 50%,$normal-line,$normal-line calc(50% + 4px),transparent calc(50% + 4px),transparent) no-repeat right bottom / 5% 10% border-box,
    linear-gradient($normal-line,$normal-line) no-repeat left 3px bottom / 20px 2px border-box,
    linear-gradient($normal-line,$normal-line) no-repeat right 2px bottom / 20px 2px border-box,
    linear-gradient(to right bottom,transparent,transparent 50%,$normal-bg,$normal-bg calc(50% + 1px),transparent calc(50% + 10px),transparent) no-repeat left top / 50% 100% border-box,
    linear-gradient(to left bottom,transparent,transparent 50%,$normal-bg,$normal-bg  calc(50% + 1px),transparent calc(50% + 10px),transparent) no-repeat right top / 50% 100% border-box,
    linear-gradient(to top,$normal-bg,$normal-bg 1px,transparent) no-repeat left 5px bottom / calc(100% - 10px) 10px border-box;
   }
    &.heter-triangle-respire{
    &::after{
        @include respire-base;
        background:
        linear-gradient(to right bottom,transparent,transparent 50%,$warning-line,$warning-line calc(50% + 4px),transparent calc(50% + 4px),transparent) no-repeat left calc(50% - 8px) top/ 5% 10% border-box,
        linear-gradient(to right bottom,transparent,transparent 50%,$warning-line,$warning-line calc(50% + 4px),transparent calc(50% + 4px),transparent) no-repeat left bottom/ 5% 10% border-box,
        linear-gradient(to left bottom,transparent,transparent 50%,$warning-line,$warning-line calc(50% + 4px),transparent calc(50% + 4px),transparent) no-repeat right calc(50% - 8px) top / 5% 10% border-box,
        linear-gradient(to left bottom,transparent,transparent 50%,$warning-line,$warning-line calc(50% + 4px),transparent calc(50% + 4px),transparent) no-repeat right bottom / 5% 10% border-box,
        linear-gradient($warning-line,$warning-line) no-repeat left 3px bottom / 20px 2px border-box,
        linear-gradient($warning-line,$warning-line) no-repeat right 2px bottom / 20px 2px border-box,
        linear-gradient(to right bottom,transparent,transparent 50%,$warning-bg,$warning-bg calc(50% + 1px),transparent calc(50% + 10px),transparent) no-repeat left top / 50% 100% border-box,
        linear-gradient(to left bottom,transparent,transparent 50%,$warning-bg,$warning-bg  calc(50% + 1px),transparent calc(50% + 10px),transparent) no-repeat right top / 50% 100% border-box,
        linear-gradient(to top,$warning-bg,$warning-bg 1px,transparent) no-repeat left 5px bottom / calc(100% - 10px) 10px border-box;
    }
}
}